<template>
  <div>
    <Breadcrumb :style="{margin: '24px 0'}">
      <BreadcrumbItem>数据分析</BreadcrumbItem>
      <BreadcrumbItem>
        <router-link to="/index/analyzeHotSearch">热门搜索</router-link>
      </BreadcrumbItem>
    </Breadcrumb>
    <Content style="height:250px;" :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
      
            <div id="wordCloud"></div>
      <!-- <div class="demo-split">
        <Split v-model="split">
          <div slot="left" class="demo-split-pane">Left Pane</div>
          <div slot="right" class="demo-split-pane">
            <div id="wordCloud"></div>
          </div>
        </Split>
      </div> -->
    </Content>
  </div>
</template>
<script>
import { url } from "../utils/api.js";
export default {
  data() {
    return {
      split  : 0.5,
      keyword: ""
    };
  },
  methods: {},
  mounted() {
    var that = this;
    let url  = this.Api.url.allQuestion;
      that.http.get(url).then(res => {
        for(var i = 0; i < res.length; i++){
           that.keyword = that.keyword + " "+ res[i].keyword;
        }
    var data = that.keyword
        .split(/[,\. ]+/g)
        .reduce(function (arr, word) {
            var obj = arr.find(function (obj) {
                return obj.name === word;
            });
            if (obj) {
                obj.weight += 1;
            } else {
                obj = {
                    name  : word,
                    weight: 1
                };
                arr.push(obj);
            }
            return arr;
        }, []);
    Highcharts.chart('wordCloud', {
        series: [{
            type: 'wordcloud',
            data: data
        }],
        title: {
            text: '热点搜索词'
        }
    });
      });
  }
};
</script>
<style>
.highcharts-exporting-group,.highcharts-credits{
  display: none;
}
</style>
